<template>
	<view class="weather-container">

		<view v-for="(day, index) in daily" :key="index" class="weather-item">
			<view class="date">{{ day.fxDate }}</view>
			<view class="weather">
				<view class="sunrise-sunset">
					日出：{{ day.sunrise }}，日落：{{ day.sunset }}
				</view>
				<view class="moon-info">
					月相：{{ day.moonPhase }}，月升：{{ day.moonrise }}，月落：{{ day.moonset }}
				</view>
				<view class="temp">
					最高温度：{{ day.tempMax }}°C，最低温度：{{ day.tempMin }}°C
				</view>
				<view class="weather-condition">
					白天：{{ day.textDay }}，夜间：{{ day.textNight }}
				</view>
				<view class="wind-info">
					风向：{{ day.windDirDay }}，风力：{{ day.windScaleDay }}，风速：{{ day.windSpeedDay }}km/h
				</view>
				<view class="other-info">
					湿度：{{ day.humidity }}%，气压：{{ day.pressure }}hPa，能见度：{{ day.vis }}km，云量：{{ day.cloud }}%
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		userStore
	} from '../../store/userStore';
	import {
		CONFIG
	} from '../../utils/config'

	onLoad(() => {
		getWeather()
	})



	let daily = ref([])
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_7day, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		console.log(res)
		daily.value = res.daily
		console.log(daily.value)
	}
	uni.setNavigationBarTitle({
		title: "天气预报",
	});
</script>

<style scoped>
.weather-container {
    padding: 16px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.weather-item {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.date {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.weather {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sunrise-sunset,
.moon-info,
.temp,
.weather-condition,
.wind-info,
.other-info {
    font-size: 16px;
    color: #333333;
}

.sunrise-sunset,
.moon-info {
    display: flex;
    justify-content: space-between;
}

.temp {
    display: flex;
    align-items: center;
}

.temp span {
    margin: 0 8px;
}

.temp span:first-child {
    font-weight: bold;
}

.temp span:last-child {
    color: #ff0000;
}

.weather-condition {
    display: flex;
    justify-content: space-between;
}

.wind-info,
.other-info {
    display: flex;
    flex-wrap: wrap;
}

.wind-info span,
.other-info span {
    margin-right: 16px;
}
</style>
